<template>
  <div class="home-container">
    <v-container class="fill-height" fluid>
      <v-row align="center" justify="center">
        <v-col cols="12" sm="8" md="6" lg="4">
          <v-card class="elevation-12">
            <v-card-title class="headline text-center">
              {{ $t('home.welcome') }}
            </v-card-title>
            <v-card-text>
              <p class="text-center">{{ $t('home.description') }}</p>
              <v-btn
                block
                color="primary"
                class="mt-4"
                :to="localePath('/login')"
              >
                {{ $t('home.login') }}
              </v-btn>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  // 不需要认证即可访问
  auth: false,
  head() {
    return {
      title: this.$t('home.title')
    }
  }
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}
</style>